import React, { Component } from 'react';
import * as Relay from "react-relay";
import Page from '../Page/PageComponent';
import styles from './Wtp.scss';

class WtpListComponent extends Component {
  render() {
    const { viewer } = this.props;
    return (
      <div>
        <Page heading="设备列表">
          <div style={{display: 'flex', fontSize: '20px'}}>
            {
              ['sn', '合同编号', '名称', 'mac地址', '位置', '状态', '操作'].map(tag => (
                <span className={styles.wtpInfo}>{tag}</span>
              ))
            }
          </div>
          {
            viewer.wtps.edges.map(wtp => (
              <div style={{display: 'flex'}}>
                <span className={styles.wtpInfo}>{wtp.node.sn}</span>
                <span className={styles.wtpInfo}>{wtp.node.sn}</span>
                <span className={styles.wtpInfo}>{wtp.node.name}</span>
                <span className={styles.wtpInfo}>{wtp.node.mac}</span>
                <span className={styles.wtpInfo}>{wtp.node.position}</span>
                <span className={styles.wtpInfo}>{wtp.node.status}</span>
                <span className={styles.wtpInfo}>{wtp.node.sn}</span>
              </div>
            ))
          }
        </Page>
      </div>
    );
  }
}

export default Relay.createContainer(WtpListComponent, {
  initialVariables: {
    defaultFirst: 1000,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        id
        companies(first: $defaultFirst){
          edges{
            node{
              id
              name
            }
          }
        }
        wtps(first: $defaultFirst){
          edges{
            node{
              id
              sn
              mac
              position
              status
              name
            }
          }
        }
      }
    `
  }
});
